<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/common/meta.jsp"%>
<title>VTC - Holistic category - HPP</title>
<%@ include file="/common/css_js.jsp"%>

<script type="text/javascript">
	var validator;

	$(function(){
		validator=$("#attrForm").validate();
	})
	

	function attrOnChange(attr,value) {
		var selectedAttrCode = attr.value;
		$.ajax({
			url : "categoryProgrammeAttribute!getAttrValues.action?no-decorate=0&attribute.programmeAttribute="
					+ selectedAttrCode,
			cache : true,
			dataType : "json",
			async : false,
			success : function(data) {
				$("#attrValue").empty();
				$("#attrValue").append("<option value=''>- Select -</option>");
				$.each(data, function(i, n) {
					if(value==n.code){
						$("#attrValue").append(
								"<option value='"+n.code+"' selected='selected'>" + n.desc + "</option>");
					}else{
						$("#attrValue").append(
								"<option value='"+n.code+"'>" + n.desc + "</option>");
					}
				})
			},
			error : function(data) {
				$("#errorMsgSpan").html(data);
			}
		});
	}
	function clickBtn(action){
		switch(action){
		case "save":
			if(validator.form()){
				$("#attrForm").attr('action', 'categoryProgrammeAttribute!save.action?no-decorate=0')
				$("#attrForm").submit();
				CE.close();
				break;
			}
		case "delete":
			  $("#mainForm_search").attr("value", "false");
			  break;
		}
	}
</script>

</head>
<style>
body {
	background: white !important;
}
</style>
</head>
<body>

	<span class="errorLabel" id="errorMsgSpan"></span>

	<div class="bodyBlank">
		<div class="padding">
			<!-- InstanceBeginEditable name="content" -->
			<div class="bodyBlank2">
				<div class="pageTitle">Programme Attributes</div>
				<div class="form2">
				<s:form method="post" name="attrForm" id="attrForm" target="catForm">
				<s:hidden name="categoryNodeId" id="categoryNodeId" value="%{categoryNodeId}"></s:hidden>
				<s:hidden name="categoryNodeType" id="categoryNodeType" value="%{categoryNodeType}"></s:hidden>
				<s:hidden name="attribute.id" id="attribute.id" value="%{attribute.id}"></s:hidden>
				<s:hidden id="categoryId" name="categoryId"
					value="%{categoryId}"></s:hidden>
					<s:hidden name="treeType" id="treeType" value="%{treeType}"/>
					<table border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td class="sep"><img src="../images/spacer.gif"
								style="width: 180px;" />
							</td>
							<td class="sep sep2"><img src="../images/spacer.gif" />
							</td>
						</tr>
						<tr>
							<td class="fLabel">Programme Attribute :</td>
							<td class="fField"><s:select id="attrCode"
									name="attribute.programmeAttribute" cssClass="inputSelect required"
									list="paramService.allTypeList" listKey="code" listValue="desc"
									headerKey="" headerValue="-- Select --"
									onchange="attrOnChange(this,null)"></s:select></td>
						</tr>
						<tr>
							<td class="fLabel">Attribute Value :</td>
							<td class="fField" style="vertical-align: top; height: 120px">
								<select id="attrValue" class="inputSelect required" name="attribute.value"
								style="width: 305px">
									<option>- Select -</option>
							</select>
							<script>
							var att = "<s:property value='attribute.programmeAttribute' />";
							if(att!=null && att!=""){
								attrOnChange(document.getElementById("attrCode"),"<s:property value='attribute.value' />");
							}
							</script>
								<div id="divAttrValue"></div></td>
						</tr>
					</table>
					</s:form>
				</div>
				
				<div class="btnSet btnSetTypeA">
					<div class="left">
					<security:authorize  access="hasAnyRole('PLANNING_EXERCISE_INSERT','PLANNING_EXERCISE_UPDATE')">
						<div class="button">
							<div class="left">
								<div class="right">
									<input class="inputButton" type="button" id="saveBut" name=""
										value="&nbsp;Save&nbsp;" onclick="clickBtn('save')" />
								</div>
							</div>
						</div>
						</security:authorize>	
						<div class="button">
							<div class="left">
								<div class="right">
									<input class="inputButton" type="button" id="" name=""
										value="Cancel" onclick="CE.close()" />
								</div>
							</div>
						</div>
					</div>
				</div>
				
			</div>
			<!-- InstanceEndEditable -->
			
			<script>
function checkLevel1Endorsed(){
	var type = document.getElementById("categoryNodeType").value;
	var categoryId = document.getElementById("categoryId").value;
	$.ajax({
		url : "category!checkLevel1Endorsed.action?no-decorate=0&categoryId="+categoryId,
		cache : true,
		dataType : "text",
		async : false,
		success : function(data) {
			if(data=="true"){
				if(type="Root"){
					$("#saveBut").attr("disabled", "true");
				}
			}
		},
		error : function(data) {
		}
	});
}
checkLevel1Endorsed();
</script>
		</div>
	</div>
</body>
</html>
